<template>
	<div class="asshead">
		<div class="assisttop">
			<h2>辅导解析</h2>
			<span>大学</span>
			<img src="img/arrow.png" class="arrow"/>
			<img src="img/assistma.png" class="assistma"/>
			<p>扫书码</p>
		</div>
		<div class="assistsearch">
			<input type="text" placeholder="搜索书名解析学习"/>
			<span class="iconfont icon-sousuo"></span>
			<div class="focus">
				<img src="img/assistma.png" class="assistma"/>
				<p>扫书码</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		mounted(){
			window.onscroll=function(){
				let show=document.querySelector(".focus");
				//兼容问题  获取滚动条移动的垂直距离
				var h = document.body.scrollTop || document.documentElement.scrollTop;
				if(h >= 40 ){
					show.style.display="block";
				}else{
					show.style.display="none";
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.asshead{
		position: sticky;
		top: -0.46rem;
		z-index: 5;
		.assisttop{
			height: 0.45rem;
			h2,span,.arrow{
				float: left;
			}
			h2{
				font-size: 0.25rem;
				margin-left: 0.15rem;
				margin-top: 0.1rem;
			}
			span{
				font-size: 0.14rem;
				color: #1ab584;
				margin-left: 0.1rem;
				margin-top: 0.18rem;
			}
			.arrow{
				margin-top: 0.25rem;
				margin-left: 0.04rem;
			}
			.assistma{
				float: left;
				margin-top: 0.17rem;
				margin-left:1.1rem;
			}
			p{
				font-size: 0.15rem;
				color: #000000;
				float: left;
				margin-left: 0.08rem;
				margin-top: 0.17rem;
				font-weight: bold;
			}
		}
		.assistsearch{
			width: calc(100% - 0.3rem);
			height: 0.4rem;
			padding: 0.15rem 0.14rem;
			position: absolute;
			background-color: #f7f7f7;
			input{
				outline: none;
				width: calc(100% - 0.3rem);
				height: 0.4rem;
				border: 1px solid #ececec;
				border-radius: 0.05rem;
				font-size: 0.14rem;
				text-indent: 0.34rem;
				position: absolute;
				left:0.15rem;
				top:0.15rem;
			}
			span{
				position: absolute;
				top: 0.28rem;
				left: 0.25rem;
			}
			.focus{
				display: none;
				.assistma{
					position: absolute;
					top: 0.24rem;
					right: 0.7rem;
				}
				p{
					font-size: 0.15rem;
					color: #000000;
					position: absolute;
					right: 0.18rem;
					top: 0.24rem;
				}
			}
		}
	}
</style>
